<template>
  <view class="shopDetail_container app_container_page">
    <view class="content">
      <view class="title"> {{ storeMsg.storeName ? storeMsg.storeName : '--' }} </view>
      <image :src="storeMsg.storeThumbnail" mode="aspectFill" class="logo"></image>
      <view class="address">
        <view class="address-icon"></view>
        <view class="addressText"> 位置：{{ storeMsg.storeAddress ? storeMsg.storeAddress : '--' }} </view>
      </view>
      <view class="message">
        <view class="contacts">
          <view class="contacts-icon"></view>
          <view class=""> 联系人：{{ storeMsg.storeContacts ? storeMsg.storeContacts : '--' }} </view>
        </view>
        <view v-show="iscollection == 1">
          <view class="collection" @click="toCancelCollect">
            <view class="cancelCollection-icon" mode=""></view>
            取消收藏
          </view>
        </view>
        <view v-show="iscollection == 0">
          <view class="collection" @click="toCollection">
            <view class="collection-icon" mode=""></view>
            收藏
          </view>
        </view>
      </view>
      <view class="callNav">
        <view class="callNavBtn" @click="CallPhone"> <view class="call-icon"></view>致电 </view>
        <view class="callNavBtn" @click="openLocationFn"> <view class="navigation-icon"></view>导航 </view>
      </view>
      <view class="detail">
        <view class="inTime"> 入住时间：{{ dayjs(storeMsg.createTime).format('YYYY年MM月DD日') }} </view>
        <view class="main"> 主营类型：{{ storeMsg.storeType ? storeMsg.storeType : '--' }} </view>
        <view class="introduce">
          {{ storeMsg.storeIntro ? storeMsg.storeIntro : '--' }}
        </view>
      </view>
    </view>
    <view class="shopDetailPic" v-show="storeMsg.imgArray.length > 0">
      <scroll-view class="scroll-view_H" :scroll-x="true">
        <image class="scroll-view-item_H" :src="img.href" v-for="img in storeMsg.imgArray" :key="img.id" mode="aspectFill"> </image>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import { findStoreById, collectProduct, cancelCollect, isCollect } from '@/api/home.js'
export default {
  data() {
    return {
      dayjs: null,
      storeMsg: {},
      id: '',
      iscollection: 0
    }
  },
  methods: {
    async openLocationFn() {
      try {
        const res = await this.$uniPromisify.request({
          methods: 'GET',
          url: 'https://restapi.amap.com/v3/geocode/geo?key=eb41d25b841f6e35549544e571bae6d2&' + '&address=' + this.storeMsg.storeAddress
        })
        if (res.geocodes[0]) {
          const location = res.geocodes[0].location.split(',')
          uni.openLocation({
            address: this.storeMsg.storeAddress,
            latitude: Number(location[1]),
            longitude: Number(location[0])
          })
        }
      } catch (error) {
        console.log(error)
        uni.showToast({
          icon: 'none',
          title: '网络错误'
        })
      }
    },
    CallPhone() {
      uni.makePhoneCall({
        phoneNumber: this.storeMsg.storePhone
      })
    },
    CollectionState() {
      isCollect({
        productId: this.storeMsg.id,
        productType: 2
      })
        .then((res) => {
          if (res.code === 200) {
            this.iscollection = res.data.isCollect
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    toCollection() {
      collectProduct({
        productId: this.storeMsg.id,
        productType: 2
      })
        .then((res) => {
          if (res.code === 200) {
            this.iscollection = 1
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    toCancelCollect() {
      cancelCollect({
        productId: this.storeMsg.id,
        productType: 2
      })
        .then((res) => {
          if (res.code === 200) {
            this.iscollection = 0
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  created() {
    this.dayjs = dayjs
  },
  async onLoad(val) {
    this.id = val.id
    findStoreById({
      storeId: val.id
    })
      .then((res) => {
        if (res.code === 200) {
          this.storeMsg = res.data
          this.CollectionState()
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
</script>

<style lang="scss">
.shopDetail_container {
  width: 100%;
  padding-bottom: 88rpx;
  .content {
    padding: 24rpx 30rpx 50rpx 30rpx;
    font-size: 30rpx;

    .title {
      min-height: 60rpx;
      line-height: 60rpx;
      font-size: 40rpx;
    }
    .logo {
      width: 690rpx;
      height: 340rpx;
      border-radius: 20rpx;
      margin-top: 19rpx;
      margin-bottom: 64rpx;
    }
    .address {
      display: flex;
      align-items: center;
      line-height: 50rpx;
      margin-bottom: 30rpx;
      .addressText {
        width: 620rpx;
      }
    }

    .message {
      display: flex;
      justify-content: space-between;

      .contacts {
        display: flex;
        align-items: center;
        line-height: 50rpx;
      }

      .collection {
        min-width: 200rpx;
        height: 60rpx;
        background: $theme-color;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 29rpx;
        padding: 0 34rpx;
      }
    }

    .callNav {
      padding: 0 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;

      .callNavBtn {
        width: 300rpx;
        height: 80rpx;
        background: $theme-color;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .call-icon {
        width: 24rpx;
        height: 31rpx;
        margin-right: 44rpx;
        background: url('#{$BASEURL}/call-icon.png') no-repeat;
        background-size: cover;
      }
      .navigation-icon {
        width: 36rpx;
        height: 33rpx;
        margin-right: 44rpx;
        background: url('#{$BASEURL}/navigation-icon.png') no-repeat;
        background-size: cover;
      }
    }

    .detail {
      padding-right: 10rpx;

      .inTime {
        margin: 55rpx 0 46rpx 0;
      }

      .main {
        margin-bottom: 48rpx;
      }

      .introduce {
        line-height: 52rpx;
      }
    }
  }

  .shopDetailPic {
    height: 300rpx;
    background: #f9f9f9;

    .scroll-view_H {
      white-space: nowrap;
      height: 300rpx;
      padding: 30rpx 0;

      .scroll-view-item_H {
        width: 240rpx;
        height: 240rpx;
        box-shadow: 0px 20rpx 60rpx 0px rgba(0, 0, 0, 0.1);
        display: inline-block;
        margin-left: 30rpx;

        &:last-child {
          margin-right: 30rpx;
        }
      }
    }
  }
}
</style>
